import React, { Component } from "react";
import { Affix, Button, Icon, Popover, Radio, Spin } from "antd";
import LPService from "containers/enterprise-manage/legal-person/legal-person.service";
import CommonCard from "containers/enterprise-manage/set-of-books-company/components/common-card";
import { checkMenuDisabled, messages } from "share/common";
import debounce from "lodash.debounce";
import emptyImg from "images/enterprise-manage/empty.png";
import emptySearchImg from "images/enterprise-manage/empty_search.png";

const RadioGroup = Radio.Group;

class LegalPersonComp extends Component {
  constructor(props) {
    super(props);
    this.state = {
      // legalPersonsLoading: false,
      // legalPersonsData: [],
      scope: "ALL",
      editing: false,
      activeId: "",
    };
    this.onSelect = debounce(this.onSelect, 300);
    this.infoList = [
      {
        name: messages("basic-5.key210") /*纳税人识别号*/,
        key: "taxpayerNumber",
      },
    ];
    this.flag = false;
    this.delayFlag = debounce(() => {
      this.flag = false;
    }, 300);
  }

  componentWillMount() {}

  componentDidMount() {
    const { onRef } = this.props;
    onRef && onRef(this);
    this.getScope();
  }

  componentWillReceiveProps(nextProps) {}

  componentWillUnmount() {}

  setActiveId = () => {
    this.setState({ activeId: "" });
  };

  getScope = () => {
    LPService.getScope()
      .then((res) => {
        this.setState({
          scope: res.data.scope,
          id: res.data.id,
        });
      })
      .catch((err) => {});
  };

  handleSetScope = () => {
    const { scope, id } = this.state;
    this.setState({
      confirmLoading: true,
    });
    const params = { id: id, scope: scope };
    LPService.setScope(params)
      .then((res) => {
        this.setState({
          confirmLoading: false,
          editing: false,
        });
      })
      .catch((err) => {
        this.setState({
          confirmLoading: false,
        });
      });
  };

  //处理创建类型
  handleScopeType = (e) => {
    this.setState({ scope: e.target.value });
  };

  onCancel = () => {
    this.setState({
      editing: false,
    });
    this.getScope();
  };

  onItemClick = (item) => {
    const { activeId } = this.state;
    this.setState({ activeId: activeId === item.id ? "" : item.id }, () => {
      if (activeId === item.id) {
        this.onSelect();
      } else {
        this.onSelect(item);
      }
    });
  };

  onSelect = (item) => {
    const { onSelect } = this.props;
    onSelect && onSelect("legalEntityId", item);
  };

  onItemEdit = (item) => {
    const { onEdit } = this.props;
    onEdit &&
      onEdit("edit-legal-entity", {
        legalPersonOID: item.companyReceiptedOID,
        titleName: item.companyName,
        legalPersonID: item.id,
      });
    // onEdit &&
    // onEdit("edit-legal-entity", {
    //   legalPersonOID: item.companyReceiptedOID,
    //   onSave: () => {},
    //   isEdit: true,
    // });
  };

  setMoreLoading = (moreLoading) => {
    const { onGetMore } = this.props;
    if (moreLoading) {
      onGetMore && onGetMore("LEGAL_ENTITY");
    }
    this.setState({ moreLoading });
  };

  renderTicketScope = () => {
    const { scope, editing, confirmLoading } = this.state;
    const obj = {
      ALL: messages("basic-5.key233") /*可见全部*/,
      SET_OF_BOOKS: messages("basic-5.key234") /*可见员工所在账套*/,
      LEGAL_ENTITY: messages("basic-5.key235") /*可见员工所在法人*/,
    };
    return (
      <div>
        <span className={"set-of-books-company-tip"}> {messages("basic-5.key236") /*员工可见开票范围*/}：</span>
        {editing ? (
          <span>
            <div style={{ marginBottom: 8 }}>
              <RadioGroup onChange={this.handleScopeType} value={scope}>
                <Radio value={"ALL"}>{messages("basic-5.key233") /*可见全部*/}</Radio>
                <Radio value={"SET_OF_BOOKS"}>{messages("basic-5.key234") /*可见员工所在账套*/}</Radio>
                <Radio value={"LEGAL_ENTITY"}>{messages("basic-5.key235") /*可见员工所在法人*/}</Radio>
              </RadioGroup>
            </div>
            <div>
              <Button type="primary" loading={confirmLoading} onClick={this.handleSetScope}>
                {messages("common.ok") /*确定*/}
              </Button>
              <Button onClick={this.onCancel} style={{ marginLeft: 10 }}>
                {messages("common.cancel") /*取消*/}
              </Button>
            </div>
          </span>
        ) : (
          <span>
            {obj[scope]}
            <a
              onClick={() => {
                this.setState({
                  editing: true,
                });
              }}
              className="left-gap"
            >
              {messages("common.edit") /*编辑*/}
            </a>
          </span>
        )}
      </div>
    );
  };

  render() {
    const { data = [], loading = false, allActive, keyword, onlyLeft } = this.props;
    const { activeId, moreLoading } = this.state;
    const disabled = checkMenuDisabled(["authPolicyAll", "setOfBook"]);
    const title = (
      <div>
        <div>
          {
            messages(
              "basic-5.key238"
            ) /*1.法人实体名称是员工在法律上归属的公司注册名称,在应用开票平台开具增值税发票时,作为选择开票费用集合的单位*/
          }
          {/*1.法人实体名称是员工在法律上归属的公司注册名称,*/}
          {/*在应用开票平台开具增值税发票时,作为选择开票费用集合的单位*/}
        </div>
        <div>
          {
            messages(
              "basic-5.key239"
            ) /*2.法人实体详细信息是员工个人开具增值税发票的必要信息,用户可在APP我的-开票信息中查看*/
          }
          {/*2.法人实体详细信息是员工个人开具增值税发票的必要信息,*/}
          {/*用户可在APP我的-开票信息中查看*/}
        </div>
      </div>
    );
    return (
      <div className="center-legal-persons">
        <Affix
          offsetTop={0}
          target={() => {
            return document.querySelector(".center-legal-persons");
          }}
        >
          <div className={"center-title-box"}>
            <div className="title-and-count-box">
              <div className={"set-of-books-company-title"}>
                <span>{messages("basic-5.key167") /*法人实体*/}</span>
                <Popover content={title}>
                  <span className="left-right-gap">
                    <Icon type="info-circle-o" />
                  </span>
                </Popover>
              </div>
              <div className={"set-of-books-company-tip"}>
                {messages("basic-5.key975", { arg1: data.totalElements || "-" }) /*共{arg1}条*/}
              </div>
            </div>
            {!disabled && this.renderTicketScope()}
          </div>
        </Affix>
        <Spin spinning={loading}>
          <div className="common-scroll-area">
            {data &&
              data.content.map((item) => {
                return (
                  <CommonCard
                    onlyLeft={onlyLeft}
                    keyword={keyword}
                    control
                    propActive={allActive ? true : item.id === activeId}
                    onItemClick={this.onItemClick}
                    onItemView={this.onItemEdit}
                    titleKey={"companyName"}
                    singleItem={item}
                    infoList={this.infoList}
                    key={item.id}
                    statusKey={"enable"}
                  />
                );
              })}
            {data && data.content && data.content.length > 0 && (
              <div
                onClick={() => {
                  if (data.totalElements > data.content.length) {
                    this.setMoreLoading(true);
                  }
                }}
                className={`load-more-text ${data.totalElements > data.content.length ? "hover" : ""}`}
              >
                {moreLoading ? (
                  <Icon type="loading" />
                ) : data.totalElements > data.content.length ? (
                  messages("basic-5.key948") /*加载更多*/
                ) : (
                  messages("common.no.more") /*没有更多了*/
                )}
              </div>
            )}
            {data && data.totalElements === 0 && (
              <div className="empty-content">
                <div className="img-box">
                  <img src={keyword ? emptySearchImg : emptyImg} className="img" />
                </div>
                <div className={`load-more-text`}>
                  {
                    keyword
                      ? messages("basic-5.key979") /*未搜索到法人实体*/
                      : messages("basic-5.key980") /*该账套下暂无法人实体*/
                  }
                </div>
              </div>
            )}
          </div>
        </Spin>
      </div>
    );
  }
}

LegalPersonComp.propTypes = {};

export default LegalPersonComp;
